<template>
	<item name="图片" :ex="state.fileList2.length" :must="must">
		<van-icon name="add-o" @click="choose" v-if="!disabled" />
		<template #ex>
			<view class="img-box" v-for="(item,index) in state.fileList2" :key="index">
				<image class="img-" :src="item.path" mode="heightFix" @longpress="remove(item, index)"></image>
			</view>
		</template>
	</item>
</template>

<script setup>
	import { reactive } from 'vue'
	import { msg, confirm } from '/utils/utils.js'
	import kdApis from '/api/modularApi/kdApi.js'
	const state = reactive({
		fileList: [],
		fileListLarge: {},
		fileList2: [],
		reUp: false
	})

	const props = defineProps({
		FormId: {
			type: String
		},
		InterId: {
			type: String
		},
		BillNO: {
			type: String
		},
		disabled: {
			type: Boolean,
			default: () => false
		},
		must: {
			type: Boolean,
			default: () => false
		}
	})
	// IsLast false
	const choose = () => {
		uni.chooseImage({
			success: async (data) => {
				data.tempFiles.forEach(item => {
					if (item.size > 20 * 1024 * 1024) {
						msg(`过滤过大附件 [ ${item.name} ][ ${(item.size / 1024 / 1024).toFixed(2)}M ]`, "error")
						item.tooBig = true
					}
					if (item.name.includes("exe")) {
						msg(`过滤文件 [ ${item.name} ][ ${(item.size / 1024 / 1024).toFixed(2)}M ]`, "error")
						item.tooDanger = true
					}
					if (!item.tooBig && !item.tooDanger) {
						state.fileList2.push(item)
						state.reUp = true
					}

					var reader = new FileReader()
					reader.readAsArrayBuffer(item)
					reader.onload = () => {
						var arrayBuffer = reader.result
						var bytes = new Uint8Array(arrayBuffer)
						// console.log(bytes)
						// 超过4M 就需要截断
						let len = bytes.length / 1024 / 1024
						if (len > 4) {
							let num = Math.ceil(len / 4) // 截取次数
							let numLen = Math.floor(bytes.length / num)
							state.fileListLarge[item.name] = []
							for (let i = 0; i < num; i++) {
								state.fileListLarge[item.name].push({
									SendByte: uint8ArrayToBase64(i == num - 1 ? bytes.slice(i * numLen) : bytes.slice(i * numLen, (i + 1) * numLen)),
									FileName: item.name,
									IsLast: i + 1 == num ? true : false,
									FormId: null,
									InterId: null,
									BillNO: null,
									AliasFileName: i
								})
							}
							// console.log(state.fileListLarge)
						} else {
							let base64 = uint8ArrayToBase64(bytes)
							state.fileList.push({
								SendByte: base64,
								FileName: item.name,
								IsLast: true
							})
						}
					}
				})
			}
		})
	}

	function uint8ArrayToBase64(uint8Array) {
		var binary = ''
		var len = uint8Array.length
		for (var i = 0; i < len; i++) {
			binary += String.fromCharCode(uint8Array[i])
		}
		return btoa(binary)
	}

	function base64ToUint8Array(base64) {
		var binary = atob(base64)
		var len = binary.length
		var uint8Array = new Uint8Array(len)
		for (var i = 0; i < len; i++) {
			uint8Array[i] = binary.charCodeAt(i)
		}
		return uint8Array
	}

	const emit = defineEmits(['remove'])

	const remove = (item, index) => {
		if (props.disabled) return
		confirm('请确认删除？').then(() => {
			state.fileList2.splice(index, 1)
			state.fileList.splice(index, 1)
			if (item.Id) emit('remove', item.Id)
			msg('已删除，保存后生效！')
		}).catch(() => {})
	}

	defineExpose({
		data: state
	})
</script>

<style lang="scss" scoped>
	.img-box {
		position: relative;
		display: inline-block;
		margin: 30rpx 30rpx 0 0;

		.img- {
			height: 200rpx;
			width: 100%;
		}
	}
</style>